<!DOCTYPE html>
{% load staticfiles compress %}
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
        <title>{% block title %}Pinry{% endblock %}</title>

        <!-- CSS -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700"/>
        <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.6/dist/css/bootstrap.min.css"/>
        <link rel="stylesheet" href="https://unpkg.com/dropzone@4.3.0/dist/min/dropzone.min.css"/>
        {% compress css %}
            <link rel="stylesheet" href="{% static "css/messages.css" %}"/>
            <link rel="stylesheet" href="{% static "css/lightbox.css" %}"/>
            <link rel="stylesheet" href="{% static "css/pinry.css" %}"/>
        {%  endcompress %}
        {% compress css inline %}
            {% block extra_css %}{% endblock %}
        {% endcompress %}
        <!-- End CSS -->

        <!-- Start JavaScript Variables -->
        <script>
        var apiLimitPerPage = {{ API_LIMIT_PER_PAGE }},
            errors = {% if not messages %}null,{% else %}[
                {% for message in messages %}{
                    tags: "{{ message.tags }}",
                    text: "{{ message }}"
                }{% endfor %}
            ],{% endif %}
            currentUser = {
                id: "{{ user.id }}",
                username: "{{ user.username }}",
                gravatar: "{{ user.gravatar }}"
            },
            pinFilter = "{{ request.resolver_match.kwargs.pin }}",
            tagFilter = "{{ request.resolver_match.kwargs.tag }}",
            userFilter = "{{ request.resolver_match.kwargs.user }}";
        </script>
        <!-- End JavaScript Variables -->
    </head>

    <body>
        <!-- Navigation -->
        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="{% url 'core:recent-pins' %}" class="navbar-brand">
                        <img src="{% static "img/logo-dark.png" %}" alt="Pinry"/>
                    </a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        {% if user.is_authenticated %}
                            <li><a onclick="pinForm()">New Pin</a></li>
                            <li><a href="{% url 'users:logout' %}">Logout</a></li>
                            <li>{% include "includes/bookmarklet_link.html" %}</li>
                        {% else %}
                            <li><a href="{% url 'users:login' %}">Login</a></li>
                            <li><a href="{% url 'users:register' %}">Register</a></li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </div>
        <!-- End Navigation -->

        <!-- Messages -->
        <ul id="messages"></ul>
        <!-- End Messages -->

        <!-- No Script -->
        <div id="noscript">
            <noscript>Scripting is not enabled in your browser, if you are using
                a plugin like NoScript *high five*! Our code is open source and
                you can view it on
                <a href="https://github.com/pinry/pinry/">GitHub</a>.
                <style>.spinner{display:none;}</style></noscript>
        </div>
        <!-- End No Script -->

        <!-- Content -->
        {% block yield %}{% endblock %}
        <!-- End Content -->

        <!-- Templates -->
        {% include "includes/messages.html" %}
        {% include "includes/lightbox.html" %}
        {% include "includes/pins.html" %}
        {% include "includes/pin_form.html" %}
        {% block extra_templates %}{% endblock %}
        <!-- End Templates -->

        <!-- JavaScript -->
        <script src="https://unpkg.com/jquery@2.2.4/dist/jquery.min.js"></script>
        <script src="https://unpkg.com/bootstrap@3.3.6/dist/js/bootstrap.min.js"></script>
        <script src="https://unpkg.com/handlebars@4.0.6/dist/handlebars.min.js"></script>
        <script src="https://unpkg.com/dropzone@4.3.0/dist/min/dropzone.min.js"></script>
        {% compress js %}
            <script src="{% static "js/helpers.js" %}"></script>
            <script src="{% static "js/messages.js" %}"></script>
            <script src="{% static "js/lightbox.js" %}"></script>
            <script src="{% static "js/pinry.js" %}"></script>
            <script src="{% static "js/pin-form.js" %}"></script>
        {% endcompress %}
        {% compress js inline %}
            {% block extra_js %}{% endblock %}
        {% endcompress %}
        <!-- End JavaScript -->
    </body>
</html>
